function TabBox(root) {
    console.log("this=", this);
    this.root = root;

    /* 为当前tb对象绑定标签、内容 */
    this.tabs = root.querySelectorAll("ul>li");
    this.contents = root.querySelectorAll("ol>li");
}

/* tb对象开始做切换 */
TabBox.prototype.startSwitch = function () {
    console.log("this in startSwitch=", this);
    const tb = this;

    /* tb对象中的tabs被点击 */
    tb.tabs.forEach((tab, index) => {
        tab.addEventListener("click", function (e) {
            // 全部标签取消active
            tb.tabs.forEach(function (_tab, _index) {
                _tab.classList.remove("active");
            });

            // 全部内容取消active
            tb.contents.forEach(function (_con, _index) {
                _con.classList.remove("active");
            });

            // 自己添加active
            tab.classList.add("active");

            // 对应的内容添加active
            tb.contents[index].classList.add("active");
        });
    });
};
